<template>
  <div>
    <van-row>
      <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
      >
        <template #thumb>
          <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" width="200px">
        </template>
      </van-card>
    </van-row>

    <van-row>
      <van-col span="4">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
        </van-sidebar>
      </van-col>
      <van-col span="10" offset="4">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </van-col>
    </van-row>

    <van-row>
      <van-col offset="12" span="12" >
        <van-button type="primary" v-for="(item,index) in this.ggList" >{{ggList.length===1?"默认":item.name}}</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  created() {
    this.$http.get("/admin").then(function (json){
      alert(json)
    })
  },
  name: "index",
  data() {
    return {
      ggList:[
        {
          id: "1",
          name: "2023测试",
        },
        {
          id:"2",
          name: "hahaha"
        }
      ],
      loading: true,
      finished: true,
      activeKey: 0,
    };
  },
  methods:{
    onClickLeft() {
      this.$toast('返回')
    },
    onClickRight() {
      this.$toast('按钮')
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.ggList.push(this.ggList.length + 1);
      //   }
      //
      //   // 加载状态结束
      //   this.loading = false;
      //
      //   // 数据全部加载完成
      //   if (this.ggList.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
  }
}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
